<template>
    <view class="page">
        <view class="container">
            <view class="item" v-for="item in orderList" :key="item.id">
                <view class="number">交易单号：{{ item.outTradeNo }}</view>
                <view class="date">交易时间：{{ formatDate(new Date(item.createTime).getTime()) }}</view>
                <view class="price">套餐金额：
                    <view class="count">{{ item.cost }}</view>
                    元
                </view>
                <!-- colors：按钮背景色 copyText：复制文本字符 -->
                <cc-copyBtn class="copy" copyText="872786492764717056"></cc-copyBtn>
            </view>
            <uv-load-more bgColor="#000" marginTop='0' marginBottom='0' height="40"
                :status="hasMore ? 'loading' : 'noMore'" />
        </view>
    </view>
</template>

<script setup>
import {
    ref
} from 'vue';

import {
    apiGetOrderRecords
} from "@/api/accountApi.js"
import {
    onReachBottom
} from '@dcloudio/uni-app';

const orderList = ref([])
const pageNo = ref(1)
const pageSize = ref(20)

// 是否还有更多
const hasMore = ref(true)

// 获取模型列表
const getorderList = async () => {
    let res = await apiGetOrderRecords({
        pageNo: pageNo.value,
        pageSize: pageSize.value
    })
    orderList.value = orderList.value.concat(res.data.items)
    pageNo.value = res.data.page

    if (res.data.items.length < pageSize.value) hasMore.value = false
}

// 日期格式化
const formatDate = (dateString) => {
    const date = new Date(dateString);
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    const hours = date.getHours().toString().padStart(2, '0');
    const minutes = date.getMinutes().toString().padStart(2, '0');
    const seconds = date.getSeconds().toString().padStart(2, '0');

    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

// 触底
onReachBottom(() => {
    pageNo.value++
    getorderList()
})



getorderList()
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    display: flex;
    flex-direction: column;

    .item {
        width: 100%;
        height: 324rpx;
        background: #1a1a1a;
        border-radius: 10rpx;
        position: relative;
        padding: 0 64rpx;
        box-sizing: border-box;
        font-size: 24rpx;
        font-weight: 400;
        color: #fff;
        margin-bottom: 16rpx;


        .number {
            margin-top: 64rpx;
            width: 440rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .date {
            margin-top: 30rpx;

        }

        .price {
            margin-top: 80rpx;
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            height: 38rpx;
            line-height: 30rpx;

            .count {
                width: auto;
                font-size: 48rpx;
                height: 38rpx;
                margin-right: 4rpx;

            }
        }

        .copy {
            width: 96rpx;
            height: 32rpx;
            background: #1a1a1a;
            border: 2rpx solid #999999;
            border-radius: 5rpx;

            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 64rpx;
            right: 64rpx;

            &:deep(.btns) {
                color: #999999;
                height: 28rpx;
                line-height: 28rpx;
                font-weight: 400;
                font-size: 18rpx;
                margin: 0;
            }
        }
    }
}
</style>